<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="攀登架构师">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/">
    <link rel="dns-prefetch" href="http://yoursite.com">
    <!--SEO-->

<meta name="keywords" content="" />


<meta name="description" content="
目录

1. 安装asciiDoctor
2. 转为html

2.1. 抽取出css文件
2.2. 管理html中的图片
2.3. CodeRay 和 Pygments 语法高亮


3. ..." />


<meta name="robots" content="all" />
<meta name="google" content="all" />
<meta name="googlebot" content="all" />
<meta name="verify" content="all" />
    <!--Title-->

<title>
    
    AsciiDoctor教程 |
    
    攀登架构师
</title>

<link rel="alternate" href="/atom.xml" title="攀登架构师" type="application/atom+xml">


<link rel="icon" href="/img/favicon.ico">

    


<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/style.css?rev=@@hash.css">
<link rel="stylesheet" href="/css/belonk.css?rev=@@hash.css">

    



    

<meta name="generator" content="Hexo 4.2.0"></head>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    /img/banner4.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='Sam Sune'>
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <h2>
                →攀登架构师↗
            </h2>
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://yoursite.com">
                        攀登架构师</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/"><i class="fa fa-home"></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/前端/"><i class="fa "></i>
                                前端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/后端/"><i class="fa "></i>
                                后端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/架构/"><i class="fa "></i>
                                架构</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/工具/"><i class="fa "></i>
                                工具</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="AsciiDoctor教程">
            
            AsciiDoctor教程
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2020/05/10</span>
    </span>
    
    <span class="fa-wrap">
        <i class="fa fa-eye"></i>
        <span id="busuanzi_value_page_pv"></span>
    </span>
    
    
</div>
        
        
    </div>
    
    <div class="post-body post-content">
        <div id="toc" class="toc">
<div id="toctitle">目录</div>
<ul class="sectlevel1">
<li><a href="#_安装asciidoctor">1. 安装asciiDoctor</a></li>
<li><a href="#_转为html">2. 转为html</a>
<ul class="sectlevel2">
<li><a href="#_抽取出css文件">2.1. 抽取出css文件</a></li>
<li><a href="#_管理html中的图片">2.2. 管理html中的图片</a></li>
<li><a href="#_coderay_和_pygments_语法高亮">2.3. CodeRay 和 Pygments 语法高亮</a></li>
</ul>
</li>
<li><a href="#convert-to-docbook">3. 转换文档为DocBook</a></li>
<li><a href="#_自定义主题样式">4. 自定义主题样式</a></li>
<li><a href="#_asciidoc_cheatsheet">5. Asciidoc Cheatsheet</a></li>
<li><a href="#_basic_formats">6. <span class="underline">Basic formats</span></a></li>
<li><a href="#_title_levels">7. <span class="underline">Title levels</span></a></li>
<li><a href="#_lists">8. <span class="underline">Lists</span></a></li>
<li><a href="#_links">9. <span class="underline">Links</span></a></li>
<li><a href="#_images">10. <span class="underline">Images</span></a>
<ul class="sectlevel2">
<li><a href="#_basit">10.1. Basit</a></li>
<li><a href="#_detaylı">10.2. Detaylı</a></li>
</ul>
</li>
<li><a href="#_code_higlighting">11. <span class="underline">Code higlighting</span></a></li>
<li><a href="#_blocks">12. <span class="underline">Blocks</span></a>
<ul class="sectlevel2">
<li><a href="#_sidebar_block">12.1. <em>Sidebar</em> block</a></li>
<li><a href="#_example_block">12.2. Example block</a></li>
<li><a href="#_passthrough_block">12.3. Passthrough block</a></li>
<li><a href="#_blockquotes_block">12.4. BlockquoteS block</a></li>
</ul>
</li>
<li><a href="#_uyarı_blokları">13. <span class="underline">Uyarı blokları</span></a></li>
<li><a href="#_tablolar">14. <span class="underline">Tablolar</span></a>
<ul class="sectlevel2">
<li><a href="#_basit_bir_tablo">14.1. Basit bir tablo</a></li>
<li><a href="#_kompleks_bir_tablo">14.2. Kompleks bir tablo</a></li>
</ul>
</li>
<li><a href="#_asciidocfx_eklentileri">15. <span class="underline">AsciidocFX eklentileri</span></a>
<ul class="sectlevel2">
<li><a href="#_javafx_charts_extension">15.1. JavaFX Charts Extension</a>
<ul class="sectlevel3">
<li><a href="#_pie_chart">15.1.1. Pie Chart</a></li>
<li><a href="#_area_chart">15.1.2. Area Chart</a></li>
</ul>
</li>
<li><a href="#_plantuml_extension">15.2. PlantUML Extension</a></li>
<li><a href="#_mathjax_extension">15.3. MathJAX Extension</a>
<ul class="sectlevel3">
<li><a href="#_tex_ile_formül_örneği">15.3.1. Tex ile formül örneği</a></li>
<li><a href="#_mathml_ile_formül_örneği">15.3.2. MathML ile formül örneği</a></li>
</ul>
</li>
<li><a href="#_filesystem_tree_viewers">15.4. Filesystem Tree Viewers</a>
<ul class="sectlevel3">
<li><a href="#_birinci_yol">15.4.1. Birinci Yol</a></li>
<li><a href="#_ikinci_yol">15.4.2. İkinci Yol</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>Asciidoctor用户手册: <a href="https://asciidoctor.org/docs/user-manual" target="_blank" rel="noopener" class="bare">https://asciidoctor.org/docs/user-manual</a></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-java" data-lang="java"><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Hello</span> </span>&#123;<br>    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> TOTAL_COUNT = <span class="hljs-number">100</span>;<br>    private volatile int key = TOTAL_COUNT++; <i class="conum" data-value="1"></i><b>(1)</b><br>    <span class="hljs-keyword">int</span> i = <span class="hljs-number">0</span>;<br>    <span class="hljs-keyword">private</span> String name;<br><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(String[] args)</span> </span>&#123;<br>        System.out.println(<span class="hljs-string">"Hello"</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>这里用了 <code>volatile</code> 关键字</td>
</tr>
</table>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">提示来了</div>
这里是一个提平时信息！
</td>
</tr>
</table>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">提示来了</div>
这里是一个提平时信息！
</td>
</tr>
</table>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="title">提示来了</div>
这里是一个提平时信息！
</td>
</tr>
</table>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">提示来了</div>
这里是一个提平时信息！
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_安装asciidoctor">1. 安装asciiDoctor</h2>
<div class="sectionbody">

</div>
</div>
<div class="sect1">
<h2 id="_转为html">2. 转为html</h2>
<div class="sectionbody">
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> asciidoctor mysample.adoc</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="ulist">
<ul>
<li>
<p><code>-b</code> 参数: 指定转换文件类型，默认为html，支持html(或html5)、xhtml(xhtml5)、docbook (或docbook5)、manpage，另外，支持但需要安装额外的转换器插件的类型：pdf（需要asciidoctor-pdf）、epub3（需要asciidoctor-epub3）、latex（需要asciidoctor-latex）、mallard（需要asciidoctor-mallard）</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>在源文件相同目录下生成文件：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> ls</span><br>mysample.adoc  mysample.html<br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="imageblock">
<div class="content">
<img src="./images/file.png" alt="file">
</div>
</div>
<div class="sect2">
<h3 id="_抽取出css文件">2.1. 抽取出css文件</h3>
<div class="paragraph">
<p>Asciidoctor生成html文件时，样式存放在 <code>asciidoctor.css</code> 文件中的，默认生成时样式会嵌入到html中，也可以单独抽取出来：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> asciidoctor -a linkcss mysample.adoc</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>此时，页面就会单独引入css文件：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-html" data-lang="html"><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-symbol">&lt;</span>link rel="stylesheet" href="./asciidoctor.css"<span class="hljs-symbol">&gt;</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>也可以不适用任何css，只输出html内容：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> asciidoctor -a stylesheet! mysample.adoc</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>Asciidoctor支持自定义css样式甚至自定义html生成模板。</p>
</div>
</div>
<div class="sect2">
<h3 id="_管理html中的图片">2.2. 管理html中的图片</h3>
<div class="paragraph">
<p>Asciidoctor的图片默认必须存放到源文件同目录下，也支持自定义图片目录，也可以将图片以base64的方式嵌入到html中。</p>
</div>
<div class="listingblock">
<div class="title">嵌入图片</div>
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> asciidoctor -a stylesheet! mysample.adoc</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>嵌入图片时，图片会以base64的方式编码嵌入到html内，一般很少这么做，而是单独存放图片。</p>
</div>
<div class="listingblock">
<div class="title">图片引用</div>
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc"><figure class="highlight asciidoc"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs asciidoc">image::<span class="hljs-link">file.png</span>[<span class="hljs-string"></span>]<br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>此时图片与源文件在同一目录，也可以在文件属性中定义图片存放目录:</p>
</div>
<div class="listingblock">
<div class="title">定义图片存放目录</div>
<div class="content">
<pre class="highlight"><code class="language-asciidoc" data-lang="asciidoc"><figure class="highlight asciidoc"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs asciidoc"><span class="hljs-meta">:imagesdir:</span> ./images<br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>此时，文件中引用图片都相对于该目录位置。</p>
</div>
</div>
<div class="sect2">
<h3 id="_coderay_和_pygments_语法高亮">2.3. CodeRay 和 Pygments 语法高亮</h3>
<div class="paragraph">
<p>Asciidoctor默认也会嵌入 <code>CodeRay</code> 和 <code>Pygments</code> 两种代码高亮样式到html中。</p>
</div>
<div class="ulist">
<div class="title">支持的语法高亮器和环境</div>
<ul>
<li>
<p>嵌入CodeRay</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>安装</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> gem install coderay</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>source-highlighter属性设置代码高亮器为CodeRay
coderay-css属性设置为class，则默认嵌入coderay，如果设置linkcss属性抽取样式时，则会拷贝asciidoctor-coderay.css文件到stylesdir目录</p>
</div>
<div class="ulist">
<ul>
<li>
<p>嵌入Pygments</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>安装</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> pip install Pygments</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>source-highlighter属性设置代码高亮器为Pygments
pygments-css属性设置为class，则默认嵌入coderay，如果设置linkcss属性抽取样式时，则会拷贝asciidoctor-pygments.css文件到stylesdir目录</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="convert-to-docbook">3. 转换文档为DocBook</h2>
<div class="sectionbody">
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> asciidoctor -b docbook mysample.adoc</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-shell" data-lang="shell"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs shell"><span class="hljs-meta">$</span><span class="bash"> ls</span><br>mysample.adoc  mysample.html  mysample.xml<br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>生成的xml：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-xml" data-lang="xml"><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-symbol">&lt;</span>?xml version="1.0" encoding="UTF-8"?<span class="hljs-symbol">&gt;</span><br><span class="hljs-symbol">&lt;</span>article xmlns="http://docbook.org/ns/docbook"<br>    xmlns:xl="http://www.w3.org/1999/xlink" version="5.0" xml:lang="en"<span class="hljs-symbol">&gt;</span><br>  <span class="hljs-symbol">&lt;</span>info<span class="hljs-symbol">&gt;</span><br>    <span class="hljs-symbol">&lt;</span>title<span class="hljs-symbol">&gt;</span>Hello, AsciiDoc!<span class="hljs-symbol">&lt;</span>/title<span class="hljs-symbol">&gt;</span> <i class="conum" data-value="1"></i><b>(1)</b><br>    <span class="hljs-symbol">&lt;</span>date<span class="hljs-symbol">&gt;</span>2013-09-03<span class="hljs-symbol">&lt;</span>/date<span class="hljs-symbol">&gt;</span><br>  <span class="hljs-symbol">&lt;</span>/info<span class="hljs-symbol">&gt;</span><br><span class="hljs-symbol">&lt;</span>/article<span class="hljs-symbol">&gt;</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>哈哈哈，it&#8217;s funny!</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_自定义主题样式">4. 自定义主题样式</h2>
<div class="sectionbody">
<div class="paragraph">
<p><a href="https://asciidoctor.org/docs/produce-custom-themes-using-asciidoctor-stylesheet-factory/" target="_blank" rel="noopener" class="bare">https://asciidoctor.org/docs/produce-custom-themes-using-asciidoctor-stylesheet-factory/</a></p>
</div>
<div class="paragraph">
<p><a href="https://github.com/asciidoctor/asciidoctor-stylesheet-factory" target="_blank" rel="noopener" class="bare">https://github.com/asciidoctor/asciidoctor-stylesheet-factory</a></p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>下载皮肤
<a href="mailto:git@github.com">git@github.com</a>:darshandsoni/asciidoctor-skins.git[]</p>
</li>
<li>
<p>添加属性:stylesheet: Your_Chosen_Stylesheet.css</p>
</li>
<li>
<p>完成</p>
</li>
</ol>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_asciidoc_cheatsheet">5. Asciidoc Cheatsheet</h2>
<div class="sectionbody">
<div style="page-break-after: always;"></div>
<div class="paragraph">
<p>Asciidoc is a rich text based markup language. A document written with Asciidoc can easily be converted to <strong>HTML</strong>, <strong><em>PDF</em></strong>, <strong>Docbook</strong>, <strong><em>Mobi</em></strong>, <strong>Epub</strong>, and <strong>Odt</strong> formats. This cheatsheet shows you the common features of Asciidoc Markup language.</p>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_basic_formats">6. <span class="underline">Basic formats</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p><strong>Bold</strong> , <em>İtalic</em> , <span class="underline">Underscore</span> , To<sup>p</sup> , Dow<sub>n</sub></p>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_title_levels">7. <span class="underline">Title levels</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>There are 6 Level titles as HTML. First one is for document title.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-adoc" data-lang="adoc"><figure class="highlight adoc"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs adoc"><span class="hljs-section">= Level 1</span><br><br>Content ...<br><br><span class="hljs-section">== Level 2</span><br><br>Content ...<br><br><span class="hljs-section">=== Level 3</span><br><br>Content ...<br><br><span class="hljs-section">==== Level 4</span><br><br>Content ...<br><br><span class="hljs-section">===== Level 5</span><br><br>Content ...<br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_lists">8. <span class="underline">Lists</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>There are ordered, unordered, checked and labeled list elements.</p>
</div>
<div class="ulist">
<div class="title">Unordered list</div>
<ul>
<li>
<p>deep 1</p>
<div class="ulist">
<ul>
<li>
<p>deep 2</p>
<div class="ulist">
<ul>
<li>
<p>deep 3</p>
<div class="ulist">
<ul>
<li>
<p>deep 4</p>
<div class="ulist">
<ul>
<li>
<p>deep 5</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<p>deep 1</p>
</li>
</ul>
</div>
<div class="olist arabic">
<div class="title">Ordered list</div>
<ol class="arabic">
<li>
<p>Order 1</p>
</li>
<li>
<p>Order 2</p>
<div class="olist loweralpha">
<ol class="loweralpha" type="a">
<li>
<p>Order 2a</p>
</li>
<li>
<p>Order 2b</p>
</li>
</ol>
</div>
</li>
<li>
<p>Order 3</p>
</li>
</ol>
</div>
<div class="ulist checklist">
<div class="title">Checked list</div>
<ul class="checklist">
<li>
<p><i class="fa fa-check-square-o"></i> checked</p>
</li>
<li>
<p><i class="fa fa-check-square-o"></i> checked</p>
</li>
<li>
<p><i class="fa fa-square-o"></i> unchecked</p>
</li>
<li>
<p>normal</p>
</li>
</ul>
</div>
<div class="dlist">
<div class="title">Labeled list</div>
<dl>
<dt class="hdlist1">Elma</dt>
<dd>
<p>Eski Türkçe&#8217;de "alma" diye bilinen adının, meyvenin rengi olan "al" (kırmızı)'dan geldiği bilinmektedir</p>
</dd>
<dt class="hdlist1">Armut</dt>
<dd>
<p>Gülgiller (Rosaceae) familyasının Maloideae alt familyasında sınıflanan Pyrus cinsine ait ağaç nitelikli bitki türleriyle, bu türlerden bazılarının yenilebilir meyvelerinin ortak adı.</p>
</dd>
</dl>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_links">9. <span class="underline">Links</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can use links:</p>
</div>
<div class="paragraph">
<p><a href="http://asciidocfx.org" target="_blank" rel="noopener" class="bare">http://asciidocfx.org</a> - AsciidocFX</p>
</div>
<div class="paragraph">
<p><a href="http://asciidocfx.org" target="_blank" rel="noopener">AsciidocFX</a></p>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_images">10. <span class="underline">Images</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can declare images with <code>image::</code> prefix and <code>[]</code> suffix. Path may be <em>relative</em> or <em>absolute</em> .</p>
</div>
<div class="sect2">
<h3 id="_basit">10.1. Basit</h3>
<div class="imageblock">
<div class="content">
<img src="https://kodedu.com/wp-content/uploads/2017/02/kodedu-logo-e1487527571657.png" alt="kodedu logo e1487527571657">
</div>
</div>
</div>
<div class="sect2">
<h3 id="_detaylı">10.2. Detaylı</h3>
<div class="imageblock">
<div class="content">
<img src="https://kodedu.com/wp-content/uploads/2017/02/kodedu-logo-e1487527571657.png" alt="kodedu.com">
</div>
<div class="title">Şekil 1. kodedu.com</div>
</div>
<hr>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_code_higlighting">11. <span class="underline">Code higlighting</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can declare inline or block based codes with Asciidoc syntax.</p>
</div>
<div class="paragraph">
<div class="title">Inline</div>
<p>Reference code like <code>types</code> or <code>methods</code> inline.</p>
</div>
<div class="listingblock">
<div class="title">Code block</div>
<div class="content">
<pre class="highlight"><code class="language-java" data-lang="java"><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">Hello</span> </span>&#123;<br><br>    <span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">hello</span><span class="hljs-params">()</span></span>;<br><br>&#125;<br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="paragraph">
<p>You can use numbered elements named <code>callouts</code> in Asciidoc.</p>
</div>
<div class="listingblock">
<div class="title">Numbered code block</div>
<div class="content">
<pre class="highlight"><code class="language-ruby" data-lang="ruby"><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs ruby">require 'sinatra' <i class="conum" data-value="1"></i><b>(1)</b><br><br>get '/hi' do <i class="conum" data-value="2"></i><b>(2)</b><br>  "Hello World!" <i class="conum" data-value="3"></i><b>(3)</b><br><span class="hljs-keyword">end</span><br></code></pre></td></tr></table></figure></code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td>Library import</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td>URL mapping</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td>Content for response</td>
</tr>
</table>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_blocks">12. <span class="underline">Blocks</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>Sınırlandırılmış bloklar 4&#8217;er özel karakter ile sınırlandırılmış alanlardır.</p>
</div>
<div class="sect2">
<h3 id="_sidebar_block">12.1. <em>Sidebar</em> block</h3>
<div class="sidebarblock">
<div class="content">
<div class="title">Başlık (opsiyonel)</div>
<div class="paragraph">
<p>Bu blok türünün adı <strong>Sidebar</strong> bloktur.</p>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_example_block">12.2. Example block</h3>
<div class="exampleblock">
<div class="title">Example 1. Başlık (opsiyonel)</div>
<div class="content">
<div class="paragraph">
<p>Bu blok türünün adı <strong>Example</strong> bloktur.</p>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_passthrough_block">12.3. Passthrough block</h3>
Bu blok türünün adı <b>Passthrough</b> bloktur. Bu blok içerinde HTML elemanları kullanabilirsiniz.
<br>
<br>
<u>Örneğin;</u>
<br><br>
<ul>
    <li>Ali</li>
    <li>Veli</li>
    <li>Selami</li>
</ul>
</div>
<div class="sect2">
<h3 id="_blockquotes_block">12.4. BlockquoteS block</h3>
<div class="quoteblock">
<div class="title">Başlık (opsiyonel)</div>
<blockquote>
<div class="paragraph">
<p>AspectJ dilinin kullandığı yapılar 3 kısımda toplanmıştır.</p>
</div>
<div class="dlist">
<dl>
<dt class="hdlist1">Bunlar</dt>
<dd>
<p>Ortak, Dinamik ve Statik crosscutting (enine kesen) bölümlerdir.</p>
</dd>
</dl>
</div>
<div class="paragraph">
<p>Bu bölümler, içlerinde farklı bileşenleri toplayarak bizim mevcut <strong>OOP</strong> sistemimizi <strong>AOP</strong> mantığı ile harmanlamamıza imkan veriyorlar.</p>
</div>
</blockquote>
<div class="attribution">
&#8212; Hakan Özler<br>
<cite>AspectJ Ebook</cite>
</div>
</div>
<hr>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_uyarı_blokları">13. <span class="underline">Uyarı blokları</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>Asciidoc işaretleme dilinde 5 tip uyarı (admonition) bloğu bulunmaktadır. Bu blokların kendine has ikonları bulunmaktadır.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="title">Not bloğu</div>
<div class="paragraph">
<p>Burası bir not bloğu</p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="title">Önemli bloğu</div>
<div class="paragraph">
<p>Burası bir önemli bloğu</p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="title">İpucu bloğu</div>
<div class="paragraph">
<p>Burası bir ipucu bloğu</p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock caution">
<table>
<tr>
<td class="icon">
<i class="fa icon-caution" title="Caution"></i>
</td>
<td class="content">
<div class="title">Dikkat bloğu</div>
<div class="paragraph">
<p>Burası bir dikkat bloğu</p>
</div>
</td>
</tr>
</table>
</div>
<div class="admonitionblock warning">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
</td>
<td class="content">
<div class="title">Uyarı bloğu</div>
<div class="paragraph">
<p>Burası bir uyarı bloğu</p>
</div>
</td>
</tr>
</table>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_tablolar">14. <span class="underline">Tablolar</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>Asciidoc ile hemen hemen tüm kompleks tablo yapılarını kurabilirsiniz.</p>
</div>
<div class="sect2">
<h3 id="_basit_bir_tablo">14.1. Basit bir tablo</h3>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">Table 1. Başlık (opsiyonel)</caption>
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 33.3333%;">
<col style="width: 33.3334%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Col 1</th>
<th class="tableblock halign-left valign-top">Col 2</th>
<th class="tableblock halign-left valign-top">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Item 1</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">a</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Item 2</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">b</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Item 3</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">c</p></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">6</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Three items</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">d</p></td>
</tr>
</tfoot>
</table>
</div>
<div class="sect2">
<h3 id="_kompleks_bir_tablo">14.2. Kompleks bir tablo</h3>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">Table 2. Başlık (opsiyonel)</caption>
<colgroup>
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Date</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Duration</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Avg HR</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Notes</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">22-Aug-08</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">10:24</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">157</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Worked out MSHR (max sustainable
heart rate) by going hard
for this interval.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">22-Aug-08</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">152</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Back-to-back with previous interval.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">24-Aug-08</p></td>
<td class="tableblock halign-center valign-top" colspan="3"><p class="tableblock">none</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_asciidocfx_eklentileri">15. <span class="underline">AsciidocFX eklentileri</span></h2>
<div class="sectionbody">
<div class="paragraph">
<p>AsciidocFX metin editörü, <strong>UML</strong> diagramları, <strong>matematiksel kompleks formüller</strong> ve <strong>JavaFX Chart</strong> için üç özel eklentiye sahiptir.</p>
</div>
<div class="sect2">
<h3 id="_javafx_charts_extension">15.1. JavaFX Charts Extension</h3>
<div class="paragraph">
<p>JavaFX has 8 kind of Chart component and AsciidocFX supports all of them.</p>
</div>
<div class="sect3">
<h4 id="_pie_chart">15.1.1. Pie Chart</h4>
<div class="openblock chart">
<div class="content">
<div class="paragraph">
<p>AKP,  45.6, orange
CHP,  27.8,red
MHP,  15.2
BDP,  4.2
SP,  2</p>
</div>
</div>
</div>
</div>
<div class="sect3">
<h4 id="_area_chart">15.1.2. Area Chart</h4>
<div class="openblock chart">
<div class="content">
<div class="paragraph">
<p>1,  4
3,  10
6,  15
9,  8
12, 5</p>
</div>
<div class="paragraph">
<p>1,  20
3,  15
6,  13
9,  12
12, 14</p>
</div>
</div>
</div>
<div class="paragraph">
<p>For other charts and available options, look at <a href="https://github.com/asciidocfx/AsciidocFX/wiki/Chart-Extension" target="_blank" rel="noopener">Chart extension</a> wiki page!</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_plantuml_extension">15.2. PlantUML Extension</h3>
<div class="paragraph">
<p>PlantUML metinsel olarak yazılan ifadelerle zengin UML diagramları oluşturmaya olanak tanıyan, Java bazlı bir teknolojidir. AsciidocFX gömülü olarak PlantUML desteklemektedir.</p>
</div>
<div class="openblock uml">
<div class="title">Başlık (opsiyonel)</div>
<div class="content">
<div class="paragraph">
<p>abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection</p>
</div>
<div class="paragraph">
<p>List &lt;|-- AbstractList
Collection &lt;|-- AbstractCollection</p>
</div>
<div class="paragraph">
<p>Collection &lt;|- List
AbstractCollection &lt;|- AbstractList
AbstractList &lt;|-- ArrayList</p>
</div>
<div class="paragraph">
<p>class ArrayList &#123;
Object[] elementData
size()
&#125;</p>
</div>
<div class="paragraph">
<p>enum TimeUnit &#123;
DAYS
HOURS
MINUTES
&#125;</p>
</div>
<div class="paragraph">
<p>annotation SuppressWarnings</p>
</div>
</div>
</div>
<div class="openblock uml">
<div class="title">UML <a href="http://plantuml.sourceforge.net/ditaa.html" target="_blank" rel="noopener" class="bare">http://plantuml.sourceforge.net/ditaa.html</a></div>
<div class="content">
<div class="paragraph">
<p>@startditaa
--------   -------    -------
|        --- ditaa --&gt; |       |
|  Text  |   +-------    |diagram|
|Document|   |!magic!|    |       |
|     &#123;d&#125;|   |       |    |       |
-------+   -------    -------
:                         ^
|       Lots of work      |
-------------------------
@endditaa</p>
</div>
</div>
</div>
<div class="openblock uml">
<div class="title">UML <a href="http://plantuml.sourceforge.net/ditaa.html" target="_blank" rel="noopener" class="bare">http://plantuml.sourceforge.net/ditaa.html</a></div>
<div class="content">
<div class="paragraph">
<p>@startdot
digraph foo &#123;
node [style=rounded]
node1 [shape=box]
node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
node3 [shape=record, label="&#123; a | b | c &#125;"]</p>
</div>
<div class="literalblock">
<div class="content">
<pre>  node1 -&gt; node2 -&gt; node3
&#125;
@enddot</pre>
</div>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_mathjax_extension">15.3. MathJAX Extension</h3>
<div class="paragraph">
<p>MathJAX matematiksel kompleks formüllerin, metinsel olarak ifade edildiği çeşitli dilleri (MathML, Tex, AsciiMath) görsel olarak çıktılayan bir teknolojidir. AsciidocFX gömülü olarak MathJAX desteklemektedir. AsciidocFX ile MathML ve Tex biçimlerinde kompleks formülleri PNG resmi olarak eşzamanlı olarak dökümanlarınızda kullanabilirsiniz.</p>
</div>
<div class="sect3">
<h4 id="_tex_ile_formül_örneği">15.3.1. Tex ile formül örneği</h4>
<div class="openblock math">
<div class="title">Başlık (opsiyonel)</div>
<div class="content">
<div class="paragraph">
<p>\begin&#123;align&#125;
\dot&#123;x&#125; &amp; = \sigma(y-x) \\
\dot&#123;y&#125; &amp; = \rho x - y - xz \\
\dot&#123;z&#125; &amp; = -\beta z + xyp
\end&#123;align&#125;</p>
</div>
</div>
</div>
</div>
<div class="sect3">
<h4 id="_mathml_ile_formül_örneği">15.3.2. MathML ile formül örneği</h4>
<div class="openblock math">
<div class="title">Başlık (opsiyonel)</div>
<div class="content">
<div class="paragraph">
<p>&lt;math xmlns="http://www.w3.org/1998/Math/MathML" display="block"&gt;
&lt;mi&gt;x&lt;/mi&gt;
&lt;mo&gt;=&lt;/mo&gt;
&lt;mrow&gt;
&lt;mfrac&gt;
&lt;mrow&gt;
&lt;mo&gt;&#x2212;&lt;/mo&gt;
&lt;mi&gt;b&lt;/mi&gt;
&lt;mo&gt;&#xB1;&lt;/mo&gt;
&lt;msqrt&gt;
&lt;msup&gt;
&lt;mi&gt;b&lt;/mi&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;/msup&gt;
&lt;mo&gt;&#x2212;&lt;/mo&gt;
&lt;mn&gt;4&lt;/mn&gt;
&lt;mi&gt;a&lt;/mi&gt;
&lt;mi&gt;c&lt;/mi&gt;
&lt;/msqrt&gt;
&lt;/mrow&gt;
&lt;mrow&gt;
&lt;mn&gt;2&lt;/mn&gt;
&lt;mi&gt;a&lt;/mi&gt;
&lt;/mrow&gt;
&lt;/mfrac&gt;
&lt;/mrow&gt;
&lt;mtext&gt;.&lt;/mtext&gt;
&lt;/math&gt;</p>
</div>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_filesystem_tree_viewers">15.4. Filesystem Tree Viewers</h3>
<div class="paragraph">
<p>2 farklı yolla dosya sisteminin ağaç yapısını "tree" opsiyonu ile oluşturabilirsiniz.</p>
</div>
<div class="sect3">
<h4 id="_birinci_yol">15.4.1. Birinci Yol</h4>
<div class="openblock tree">
<div class="title">Filesystem Tree</div>
<div class="content">
<div class="paragraph">
<p><mark>booksample
<mark>asciidoctor.css
</mark>book.asc
<mark>chapter-01.asc
</mark>chapter-02.asc
<mark>chapter-03.asc
</mark>chapter-04.asc
<mark>chapter-05.asc
</mark>chapter-06.asc
<mark>images
</mark>#kodcu.png
<mark>#mathml-formula.png
</mark>#tex-formula.png
#</mark>#uml-diagram.png</p>
</div>
</div>
</div>
</div>
<div class="sect3">
<h4 id="_ikinci_yol">15.4.2. İkinci Yol</h4>
<div class="openblock tree">
<div class="title">Filesystem Tree</div>
<div class="content">
<div class="paragraph">
<p>root
|-- photos
|   |-- camp.gif
|   |-- festival.png
|   `-- balloon.jpg
|-- videos
|   |-- car-video.avi
|   |-- dance.mp4
|   |-- dance01.mpg
|   |-- another video.divx
|   `-- school videos
|       `-- firstday.flv
|-- documents
|   |-- jsfile.js
|   |-- powerpoint.ppt
|   |-- chapter-01.asc
|   |-- archive-db.zip
|   |-- .gitignore
|   |-- README
|   `-- configuration.conf
`-- etc.</p>
</div>
</div>
</div>
<div class="paragraph">
<p>Döküman geliştirilmeye ve önerilere açıktır.</p>
</div>
<div class="paragraph">
<p>Teşekkürler.</p>
</div>
<div class="paragraph">
<p>Reference code like <code>types</code> or <code>methods</code> inline.</p>
</div>
<div class="paragraph">
<p>Do not pass arbitrary<code>Object</code>sto methods that accept <code>String</code>s!</p>
</div>
</div>
</div>
</div>
</div>
    </div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            商业转载请联系作者获得授权，非商业转载请注明出处 © <a href="" target="_blank">belonk.com</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    
    <a href="/2020/05/08/hello-world/" class="next-post btn btn-default" title='Hello World'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            Hello World</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

<div id="comments">
    

<div id="vcomments" class="valine"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/assets/valine.min.js"></script>

<script>
new Valine({
    av: AV,
    el: '#vcomments',
    appId: 'xOKV9J4UeQAtVkvnJC7Kq2Jn-gzGzoHsz',
    appKey: 'erIpQac4azoCmgfBB7Dl9maa',
    placeholder: '说点什么吧',
    notify: false,
    verify: true,
    avatar: 'mm',
    meta: 'nick,mail'.split(','),
    pageSize: '10',
    path: window.location.pathname,
    lang: 'zh-CN'.toLowerCase()
})
</script>


</div>

                </main>
                
                    
<aside class="col-md-4 sidebar">
    
    
<div class="widget">
    <h3 class="title">
        搜索
    </h3>
    <div id="search-form">
        <div id="result-mask" class="hide"></div>
        <div class="search-area">
            
            <input id="search-key" type="search" autocomplete="off" placeholder="搜点什么呢？">
            <button type="button" class="search-form-submit" id="search-local">
                站内搜索</button>
            
            
        </div>
        <div id="result-wrap" class="hide">
            <div id="search-result"></div>
        </div>
        <div class="hide">
            <template id="search-tpl">
                <div class="item">
                    <a href="/{path}" title="{title}">
                        <div class="title">{title}</div>
                        <div class="content">{content}</div>
                    </a>
                </div>
            </template>
        </div>
    </div>
</div>

    
    
<div class="widget">
    <h3 class="title">
        网站公告
    </h3>
    <div class="notification">
        <p style="text-align:center">
    微信公众号：攀登架构师<br>
    <img src="https://blog.belonk.com/templates/belonk/assets/images/weixinqr.jpg"></img><br>
    关注走一波~
</p>
    </div>
</div>

    
    
<div class="widget">
    <h3 class="title">
        社交
    </h3>
    <div class="content social">
        
        <a href="//github.com/belonk" rel="external nofollow" title="Github" target="_blank">
            <i class="git fa fa-git"></i>
        </a>
        
        <a href="mailto:belonk@126.com" rel="external nofollow" title="邮箱" target="_blank">
            <i class="envelope-o fa fa-envelope-o"></i>
        </a>
        
        <a href="/" rel="external nofollow" title="联系QQ" target="_blank">
            <i class="qq fa fa-qq"></i>
        </a>
        
        <a href="/" rel="external nofollow" title="微信" target="_blank">
            <i class="weixin fa fa-weixin"></i>
        </a>
        
        <a href="/" rel="external nofollow" title="QQ群" target="_blank">
            <i class="users fa fa-users"></i>
        </a>
        
        <a href="/atom.xml" rel="external nofollow" title="RSS" target="_blank">
            <i class="feed fa fa-feed"></i>
        </a>
        
    </div>
</div>

    
    
    
    
<div class="widget">
    <h3 class="title">
        归档
    </h3>
    <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/"><i class="fa" aria-hidden="true">2020-05</i></a><span class="archive-list-count">2</span></li></ul>
</div>

    
    
    
    
<div class="widget">
    <h3 class="title">
        友链
    </h3>
    <div class="content friends-link">
        
        <a href="https://blog.belonk.com" class="fa" target="_blank">
            个人博客</a>
        
        <a href="http://iuuxx.com" class="fa" target="_blank">
            忧兮博客</a>
        
        <a href="http://blog.sina.com/superbugs" class="fa" target="_blank">
            新浪博客</a>
        
    </div>
</div>

    
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
    访问量:
    <strong id="busuanzi_value_site_pv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    &nbsp; | &nbsp;
    访客数:
    <strong id="busuanzi_value_site_uv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2015
                    <a href="//beian.miit.gov.cn/" target="_blank" rel="nofollow">
                        ICP证：蜀ICP备17013205号</a>
                    
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/js/app.js?rev=@@hash.js"></script>

</body>
</html>